<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="/res/images/ico.png" type="image/x-icon">
    <script src="/res/js/bhudy.js"></script>
    <script src="/res/js/term.js"></script>
    <script src="/res/layui/layui.js"></script>
    <style>
        #terminal {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: 15px;
        }

        .terminal {
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<div id="terminal"></div>
</body>
<script>
    function getSelectedText() {
        var text = null;
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection) {
            text = document.selection.createRange().text;
        }
        return text;
    }


    var socket;
    var term;
    if (typeof (WebSocket) == "undefined") {
        // console.log("您的浏览器不支持WebSocket");
    } else {
        // console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
        // + getCookie("user_id")
        socket = new WebSocket((window.location.protocol + "//" + window.location.host + "/sys/webSocketShell").replace("http", "ws"));
        //打开事件
        socket.onopen = function () {
            console.log('Socket 已打开');

            //创建Term的控制台]
            term = new Terminal({
                cols: Math.floor($("#terminal").width() / 7.25),
                rows: Math.floor($("#terminal").height() / 17.42),
                screenKeys: false,
                useStyle: true,
                cursorBlink: true,
                convertEol: true
            });
            //打开指定的term
            term.open($("#terminal")[0]);

            //term.on方法就是实时监控输入的字段，
            term.on('data', function (data) {
                socket.send(data);
            });


        };
        //获得消息事件
        socket.onmessage = function (msg) {
            //发现消息进入    开始处理前端触发逻辑
            console.log(msg.data)
            // $("div").append(msg.data);
            term.write(msg.data);
        };
        //关闭事件
        socket.onclose = function () {
            if (confirm("已经断开连接，是否重连？")) {
                history.go(0);
            } else {
                window.close();
            }
        };
        //发生了错误事件
        socket.onerror = function () {
            //此时可以尝试刷新页面
            console.log("Socket发生了错误");
        }
    }


    window.onload = function () {
        //去掉默认的contextmenu事件，否则会和右键事件同时出现。
        document.oncontextmenu = function (e) {
            e.preventDefault();
        };
        document.onmousedown = function (e) {
            if (e.button == 2) {
                if (getSelectedText() === null || getSelectedText() === '') {
                    if (term) {
                        term.send();
                    }
                } else {
                    document.execCommand("Copy"); // 执行浏览器复制命令
                }
            }
        }
    }

</script>
</html>